<template>
	<view class="view cx-message">
		<view class="switch-tab-bg">
			<view class="switch-tab">
				<view class="tabs" :class="active === 0 ? 'is-selected' : 'no-select'" @click="btnSwitchTab(0)">身体部位
				</view>
				<view class="tabs" :class="active === 1 ? 'is-selected' : 'no-select'" @click="btnSwitchTab(1)">部位列表
				</view>
			</view>
		</view>

		<view class="container-image" v-if="!active" >
			<view class="tabs-left">
				<view class="sex-tabs" :style="{'background-color': sex === 1 ? '#dd1d1a' : '#FFF'}"
					:class="sex === 1 ? 'is-selected' : 'no-select'" @click="sex = 1, isShowBall = false">男</view>
				<view class="sex-tabs" :style="{'background-color': sex === 0 ? '#dd1d1a' : '#FFF'}"
					:class="sex === 0 ? 'is-selected' : 'no-select'" @click="sex = 0, isShowBall = false">女</view>
			</view>
			<view class="tabs-right">
				<view class="age-tabs" :style="{'background-color': isChild === 1 ? '#dd1d1a' : '#FFF'}"
					:class="isChild === 1 ? 'is-selected' : 'no-select'" @click="isChild = 1, isShowBall = false">成人
				</view>
				<view class="age-tabs" :style="{'background-color': isChild === 0 ? '#dd1d1a' : '#FFF'}"
					:class="isChild === 0 ? 'is-selected' : 'no-select'" @click="isChild = 0, isShowBall = false">儿童
				</view>
			</view>

			<view class="image-box">
				<!-- 小红点 -->
				<view class="point" v-if="isShowBall" :style="{'top': top + 'px', 'left': left + 'px'}"></view>
				<!--男性-成人-正反 模态框-->
				<view class="part-box-man" v-if="sex === 1 && isChild === 1">
					<view class="head" @click.stop="getApiPartsSymptomList('头部', 0, $event)"></view>
					<view class="neck" @click="getApiPartsSymptomList(isFace ? '咽喉' : '咽喉', 0, $event)"></view>
					<view class="trunk">
						<view class="left">
							<view class="shoulder" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="big-arm" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="elbow" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="arm" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)"></view>
							<view class="hand" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)"></view>
						</view>
						<view class="middle">
							<!--胸部-->
							<view class="chest" v-if="isFace">
								<view class="left-chest" @click="getApiPartsSymptomList('右胸部', 0, $event)"></view>
								<view class="hert" @click="getApiPartsSymptomList('左胸部', 0, $event)"></view>
								<view class="right-chest" @click="getApiPartsSymptomList('左胸部', 0, $event)"></view>
							</view>
							<view class="back-box" v-else>
								<view class="back" @click="getApiPartsSymptomList('上肢', 0, $event)"></view>
								<view class="back" @click="getApiPartsSymptomList('上肢', 0, $event)"></view>
							</view>
							<!--腹部-->
							<view class="abdomen" v-if="isFace">
								<view class="abdomens">
									<!--上腹部-->
									<view style="flex: 1; height: 100%; background-color: #f00;"
										@click="getApiPartsSymptomList('右中上腹部', 0, $event)"></view>
									<view style="flex: 1; height: 100%; background-color: #ff0;"
										@click="getApiPartsSymptomList('右中上腹部', 0, $event)"></view>
									<view style="flex: 1; height: 100%; background-color: #f00;"
										@click="getApiPartsSymptomList('右中上腹部', 0, $event)"></view>
								</view>
								<view class="abdomens">
									<!--下腹部-->
									<view style="flex: 1; height: 100%; background-color: #ff0;"
										@click="getApiPartsSymptomList('左中上腹部', 0, $event)"></view>
									<view style="flex: 1; height: 100%; background-color: #f00;"
										@click="getApiPartsSymptomList('左中上腹部', 0, $event)"></view>
									<view style="flex: 1; height: 100%; background-color: #ff0;"
										@click="getApiPartsSymptomList('左中上腹部', 0, $event)"></view>
								</view>
							</view>
							<!--腰部-->
							<view class="waist-box" v-else>
								<view class="waists" @click="getApiPartsSymptomList('左腰背部', 0, $event)"></view>
								<view class="waists" @click="getApiPartsSymptomList('右腰背部', 0, $event)"></view>
							</view>
							<view style="height: 32%;">
								<!--生殖器/肛门-->
								<view v-if="isFace"
									style="margin: 37% auto 0; width: 30%; height: 40%; background-color: #00FF00;"
									@click="getApiPartsSymptomList('生殖器', 0, $event)"></view>
								<!--臀部-->
								<view v-else class="hips-box" @click="getApiPartsSymptomList('臀部', 0, $event)"></view>
								<view v-if="!isFace" class="anus" @click="getApiPartsSymptomList('肛门', 0, $event)">
								</view>
							</view>
						</view>
						<view class="right">
							<view class="shoulder" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="big-arm" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="elbow" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="arm" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)"></view>
							<view class="hand" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)"></view>
						</view>	
					</view>
					<view class="legs-box">
						<view class="thign-box">
							<view class="thigns" @click="getApiPartsSymptomList(isFace ? '下肢' : '下肢', 0, $event)">
							</view>
							<view class="thigns" @click="getApiPartsSymptomList(isFace ? '下肢' : '下肢', 0, $event)">
							</view>
						</view>
						<view class="knee-box" v-if="isFace">
							<view class="knees" @click="getApiPartsSymptomList('下肢', 0, $event)"></view>
							<view class="knees" style="margin-right: 10%;"
								@click="getApiPartsSymptomList('下肢', 0, $event)"></view>
						</view>
						<view class="lower-leg-box">
							<view class="lower-legs" style="margin-left: 5%;"
								@click="getApiPartsSymptomList(isFace ? '下肢' : '下肢', 0, $event)"></view>
							<view class="lower-legs" style="margin-right: 5%;"
								@click="getApiPartsSymptomList(isFace ? '下肢' : '下肢', 0, $event)"></view>
						</view>
						<view class="ankle-joint-box" v-if="isFace">
							<view class="ankle-joints" @click="getApiPartsSymptomList('下肢', 0, $event)"></view>
							<view class="ankle-joints" @click="getApiPartsSymptomList('下肢', 0, $event)"></view>
						</view>
						<view class="ankle-joint-box-back" v-else>
							<view class="ankle-joints" @click="getApiPartsSymptomList('下肢', 0, $event)"></view>
							<view class="ankle-joints" @click="getApiPartsSymptomList('下肢', 0, $event)"></view>
						</view>
						<view class="foots-box" v-if="isFace">
							<view class="foot" @click="getApiPartsSymptomList('下肢', 0, $event)"></view>
							<view class="foot" @click="getApiPartsSymptomList('下肢', 0, $event)"></view>
						</view>
						<view class="foots-box-back" v-else>
							<view class="foot" @click="getApiPartsSymptomList('下肢', 0, $event)"></view>
							<view class="foot" @click="getApiPartsSymptomList('下肢', 0, $event)"></view>
						</view>
					</view>
				</view>
				<!-- 男性成人图片-正面 -->
				<image class="image" v-if="sex === 1 && isChild === 1 && isFace" src="https://yixianfeng.oss-cn-beijing.aliyuncs.com/static/images/man_face.png"
					webp="true" />
				<!-- 男性成人图片-反面 -->
				<image class="image" v-if="sex === 1 && isChild === 1 && !isFace" src="https://yixianfeng.oss-cn-beijing.aliyuncs.com/static/images/man_back.png"
					webp="true" />
				<!---女性-成人-正反 模态框-->
				<view class="part-box-woman" v-if="sex === 0 && isChild === 1">
					<view class="head" @click="getApiPartsSymptomList('头部', 0, $event)"></view>
					<view class="neck" @click="getApiPartsSymptomList(isFace ? '咽喉' : '咽喉', 0, $event)">
					</view>
					<view class="trunk">
						<view class="left">
							<view class="shoulder" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="big-arm" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="elbow" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="arm" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="hand" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
						</view>
						<view class="middle">
							<!--胸部-->
							<view class="chest" v-if="isFace">
								<view class="left-chest" @click="getApiPartsSymptomList('右胸部', 0, $event)">
								</view>
								<view class="hert" @click="getApiPartsSymptomList('右胸部', 0, $event)"></view>
								<view class="right-chest" @click="getApiPartsSymptomList('左胸部', 0, $event)">
								</view>
							</view>
							<view class="back-box" v-else>
								<view class="back" @click="getApiPartsSymptomList('上肢', 0, $event)"></view>
								<view class="back" @click="getApiPartsSymptomList('上肢', 0, $event)"></view>
							</view>
							<!--腹部-->
							<view class="abdomen" v-if="isFace">
								<view class="abdomens">
									<!--上腹部-->
									<view style="flex: 1; height: 100%; background-color: #f00;"
										@click="getApiPartsSymptomList('右中上腹部', 0, $event)"></view>
									<view style="flex: 1; height: 100%; background-color: #ff0;"
										@click="getApiPartsSymptomList('右中上腹部', 0, $event)"></view>
									<view style="flex: 1; height: 100%; background-color: #f00;"
										@click="getApiPartsSymptomList('左中上腹部', 0, $event)"></view>
								</view>
								<view class="abdomens">
									<!--下腹部-->
									<view style="flex: 1; height: 100%; background-color: #ff0;"
										@click="getApiPartsSymptomList('右中下腹部', 0, $event)"></view>
									<view style="flex: 1; height: 100%; background-color: #f00;"
										@click="getApiPartsSymptomList('右中下腹部', 0, $event)"></view>
									<view style="flex: 1; height: 100%; background-color: #ff0;"
										@click="getApiPartsSymptomList('左中下腹部', 0, $event)"></view>
								</view>
							</view>
							<!--腰部-->
							<view class="waist-box" v-else>
								<view class="waists" @click="getApiPartsSymptomList('左腰背部', 0, $event)"></view>
								<view class="waists" @click="getApiPartsSymptomList('右腰背部', 0, $event)"></view>
							</view>
							<view style="height: 24%; background-color: rgba(0, 0, 0, .3);">
								<!--生殖器/肛门-->
								<view v-if="isFace" style="height: 55%;"></view>
								<view v-if="isFace"
									style="margin: 0 auto; width: 30%; height: 45%; background-color: #00FF00;"
									@click="getApiPartsSymptomList('生殖器', 0, $event)"></view>

								<view v-else class="hips-box" @click="getApiPartsSymptomList('臀部', 0, $event)">
								</view>
								<view v-if="!isFace" class="anus" @click="getApiPartsSymptomList('肛门', 0, $event)">
								</view>
							</view>
						</view>
						<view class="right">
							<view class="shoulder" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="big-arm" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="elbow" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="arm" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="hand" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
						</view>
					</view>
					<view class="legs-box">
						<view class="thign-box">
							<view class="thigns" @click="getApiPartsSymptomList(isFace ? '下肢' : '下肢', 0, $event)">
							</view>
							<view class="thigns" @click="getApiPartsSymptomList(isFace ? '下肢' : '下肢', 0, $event)">
							</view>
						</view>
						<view class="knee-box" v-if="isFace">
							<view class="knees" style="margin-right: 5%;"
								@click="getApiPartsSymptomList('下肢', 0, $event)"></view>
							<view class="knees" style="margin-right: 4%;"
								@click="getApiPartsSymptomList('下肢', 0, $event)"></view>
						</view>
						<view class="lower-leg-box">
							<view class="lower-legs" style="margin-left: 5%;"
								@click="getApiPartsSymptomList(isFace ? '下肢' : '下肢', 0, $event)"></view>
							<view class="lower-legs" style="margin-right: 5%;"
								@click="getApiPartsSymptomList(isFace ? '下肢' : '下肢', 0, $event)"></view>
						</view>
						<view class="ankle-joint-box" v-if="isFace">
							<view class="ankle-joints" @click="getApiPartsSymptomList('下肢', 0, $event)">
							</view>
							<view class="ankle-joints" @click="getApiPartsSymptomList('下肢', 0, $event)">
							</view>
						</view>
						<view class="ankle-joint-box-back" v-else>
							<view class="ankle-joints" @click="getApiPartsSymptomList('下肢', 0, $event)">
							</view>
							<view class="ankle-joints" @click="getApiPartsSymptomList('下肢', 0, $event)">
							</view>
						</view>
						<view class="foots-box" v-if="isFace">
							<view class="foot" @click="getApiPartsSymptomList('下肢', 0, $event)"></view>
							<view class="foot" @click="getApiPartsSymptomList('下肢', 0, $event)"></view>
						</view>
						<view class="foots-box-back" v-else>
							<view class="foot" @click="getApiPartsSymptomList('下肢', 0, $event)"></view>
							<view class="foot" @click="getApiPartsSymptomList('下肢', 0, $event)"></view>
						</view>
					</view>
				</view>
				<!-- 女性成人图片-正面  -->
				<image class="image" v-if="sex === 0 && isChild === 1 && isFace"
					src="https://yixianfeng.oss-cn-beijing.aliyuncs.com/static/images/woman_face.png" webp="true" />
				<!-- 女性成人图片-反面  -->
				<image class="image" v-if="sex === 0 && isChild === 1 && !isFace"
					src="https://yixianfeng.oss-cn-beijing.aliyuncs.com/static/images/woman_back.png" webp="true" />

				<!--男性-儿童-正反 模态框-->
				<view class="part-box-man-child" v-if="sex === 1 && isChild === 0">
					<view class="head" @click="getApiPartsSymptomList('头部', 0, $event)"></view>
					<view class="neck" @click="getApiPartsSymptomList(isFace ? '颈前部' : '颈后部', 0, $event)">
					</view>
					<view class="trunk">
						<view class="left">
							<view class="shoulder" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="big-arm" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="elbow" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="arm" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="hand" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
						</view>
						<view class="middle">
							<!--胸部-->
							<view class="chest" v-if="isFace">
								<view class="left-chest" @click="getApiPartsSymptomList('右胸部', 0, $event)">
								</view>
								<view class="hert" @click="getApiPartsSymptomList('心前区', 0, $event)">
								</view>
								<view class="right-chest" @click="getApiPartsSymptomList('左胸部', 0, $event)">
								</view>
							</view>
							<view class="back-box" v-else>
								<view class="back" @click="getApiPartsSymptomList('左肩背部', 0, $event)">
								</view>
								<view class="back" @click="getApiPartsSymptomList('右肩背部', 0, $event)">
								</view>
							</view>
							<!--腹部-->
							<view class="abdomen" v-if="isFace">
								<view class="abdomens">
									<!--上腹部-->
									<view style="flex: 1; height: 100%; background-color: #f00;"
										@click="getApiPartsSymptomList('右中上腹部', 0, $event)"></view>
									<view style="flex: 1; height: 100%; background-color: #ff0;"
										@click="getApiPartsSymptomList('右中上腹部', 0, $event)"></view>
									<view style="flex: 1; height: 100%; background-color: #f00;"
										@click="getApiPartsSymptomList('左中上腹部', 0, $event)"></view>
								</view>
								<view class="abdomens">
									<!--下腹部-->
									<view style="flex: 1; height: 100%; background-color: #ff0;"
										@click="getApiPartsSymptomList('右中下腹部', 0, $event)"></view>
									<view style="flex: 1; height: 100%; background-color: #f00;"
										@click="getApiPartsSymptomList('右中下腹部', 0, $event)"></view>
									<view style="flex: 1; height: 100%; background-color: #ff0;"
										@click="getApiPartsSymptomList('左中下腹部', 0, $event)"></view>
								</view>
							</view>
							<!--腰部-->
							<view class="waist-box" v-else>
								<view class="waists" @click="getApiPartsSymptomList('左腰背部', 0, $event)">
								</view>
								<view class="waists" @click="getApiPartsSymptomList('右腰背部', 0, $event)">
								</view>
							</view>
							<view style="height: 32%;">
								<!--生殖器/肛门-->
								<view v-if="isFace"
									style="margin: 37% auto 0; width: 30%; height: 40%; background-color: #00FF00;"
									@click="getApiPartsSymptomList('生殖器', 0, $event)"></view>
								<!--臀部-->
								<view v-else class="hips-box" @click="getApiPartsSymptomList('臀部', 0, $event)">
								</view>
								<view v-if="!isFace" class="anus" @click="getApiPartsSymptomList('肛门', 0, $event)">
								</view>
							</view>
						</view>
						<view class="right">
							<view class="shoulder" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="big-arm" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="elbow" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view v-if="isFace" class="arm"
								@click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view v-else class="arm-back"
								@click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view v-if="isFace" class="hand"
								@click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)"></view>
							<view v-else class="hand-back"
								@click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)"></view>
						</view>
					</view>
					<view class="legs-box">
						<view class="thign-box">
							<view class="thigns" @click="getApiPartsSymptomList(isFace ? '下肢' : '下肢', 0, $event)">
							</view>
							<view class="thigns" style="margin-right: 5%;"
								@click="getApiPartsSymptomList(isFace ? '下肢' : '下肢', 0, $event)">
							</view>
						</view>
						<view class="knee-box" v-if="isFace">
							<view class="knees" @click="getApiPartsSymptomList('下肢', 0, $event)"></view>
							<view class="knees" style="margin-right: 10%;"
								@click="getApiPartsSymptomList('下肢', 0, $event)"></view>
						</view>
						<view class="lower-leg-box" :style="{'height': isFace ? '38%' : '60%'}">
							<view class="lower-legs" @click="getApiPartsSymptomList(isFace ? '下肢' : '下肢', 0, $event)">
							</view>
							<view class="lower-legs" style="margin-right: -5%;"
								@click="getApiPartsSymptomList(isFace ? '下肢' : '下肢', 0, $event)">
							</view>
						</view>
						<view class="ankle-joint-box" v-if="isFace">
							<view class="ankle-joints" @click="getApiPartsSymptomList('下肢', 0, $event)">
							</view>
							<view class="ankle-joints" @click="getApiPartsSymptomList('下肢', 0, $event)">
							</view>
						</view>
						<view class="ankle-joint-box-back" v-else>
							<view class="ankle-joints" @click="getApiPartsSymptomList('下肢', $event)">
							</view>
							<view class="ankle-joints" style="margin-right: 10%;"
								@click="getApiPartsSymptomList('下肢', 0, $event)"></view>
						</view>
						<view class="foots-box" v-if="isFace">
							<view class="foot" @click="getApiPartsSymptomList('下肢', 0, $event)"></view>
							<view class="foot" @click="getApiPartsSymptomList('下肢', 0, $event)"></view>
						</view>
						<view class="foots-box-back" v-else>
							<view class="foot" @click="getApiPartsSymptomList('左脚', 0, $event)"></view>
							<view class="foot" @click="getApiPartsSymptomList('右脚', 0, $event)"></view>
						</view>
					</view>
				</view>

				<!-- 男性-儿童图片-正面 -->
				<image class="image" v-if="sex === 1 && isChild === 0 && isFace"
					src="https://yixianfeng.oss-cn-beijing.aliyuncs.com/static/images/man_child_face.png" webp="true" />
				<!-- 男性-儿童图片-反面 -->
				<image class="image" v-if="sex === 1 && isChild === 0 && !isFace"
					src="https://yixianfeng.oss-cn-beijing.aliyuncs.com/static/images/man_child_back.png" webp="true" />

				<!--女性-儿童-正反-->
				<view class="part-box-woman-child" v-if="sex === 0 && isChild === 0">
					<view class="head" @click="getApiPartsSymptomList('头部', 0, $event)"></view>
					<view class="neck" @click="getApiPartsSymptomList(isFace ? '咽喉' : '咽喉', 0, $event)">
					</view>
					<view class="trunk">
						<view class="left">
							<view class="shoulder" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="big-arm" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="elbow" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="arm" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view class="hand" @click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
						</view>
						<view class="middle">
							<!--胸部-->
							<view class="chest" v-if="isFace">
								<view class="left-chest" @click="getApiPartsSymptomList('右胸部', 0, $event)">
								</view>
								<view class="hert" @click="getApiPartsSymptomList('左胸部', 0, $event)">
								</view>
								<view class="right-chest" @click="getApiPartsSymptomList('左胸部', 0, $event)">
								</view>
							</view>
							<view class="back-box" v-else>
								<view class="back" @click="getApiPartsSymptomList('', 0, $event)">
								</view>
								<view class="back" @click="getApiPartsSymptomList('', 0, $event)">
								</view>
							</view>
							<!--腹部-->
							<view class="abdomen" v-if="isFace">
								<view class="abdomens">
									<!--上腹部-->
									<view style="flex: 1; height: 100%; background-color: #f00;"
										@click="getApiPartsSymptomList('右上腹', 0, $event)">
									</view>
									<view style="flex: 1; height: 100%; background-color: #ff0;"
										@click="getApiPartsSymptomList('上腹', 0, $event)"></view>
									<view style="flex: 1; height: 100%; background-color: #f00;"
										@click="getApiPartsSymptomList('左上腹', 0, $event)">
									</view>
								</view>
								<view class="abdomens">
									<!--下腹部-->
									<view style="flex: 1; height: 100%; background-color: #ff0;"
										@click="getApiPartsSymptomList('右下腹', 0, $event)">
									</view>
									<view style="flex: 1; height: 100%; background-color: #f00;"
										@click="getApiPartsSymptomList('下腹', 0, $event)"></view>
									<view style="flex: 1; height: 100%; background-color: #ff0;"
										@click="getApiPartsSymptomList('左下腹', 0, $event)">
									</view>
								</view>
							</view>
							<!--腰部-->
							<view class="waist-box" v-else>
								<view class="waists" @click="getApiPartsSymptomList('左腰部', 0, $event)">
								</view>
								<view class="waists" @click="getApiPartsSymptomList('右腰部', 0, $event)">
								</view>
							</view>
							<view style="height: 32%;">
								<!--生殖器/肛门-->
								<view v-if="isFace" style="height: 44%;"></view>
								<view v-if="isFace"
									style="margin: 0 auto; width: 30%; height: 40%; background-color: #00FF00;"
									@click="getApiPartsSymptomList('生殖器', 0, $event)"></view>
								<!--臀部-->
								<view v-else class="hips-box" @click="getApiPartsSymptomList('臀部', 0, $event)">
								</view>
								<view v-if="!isFace" class="anus" @click="getApiPartsSymptomList('肛门', 0, $event)">
								</view>
							</view>
						</view>
						<view class="right">
							<view class="shoulder" @click="getApiPartsSymptomList(isFace ? '左肩部' : '右肩部', 0, $event)">
							</view>
							<view class="big-arm" @click="getApiPartsSymptomList(isFace ? '左上臂' : '右上臂', 0, $event)">
							</view>
							<view class="elbow" @click="getApiPartsSymptomList(isFace ? '左肘关节' : '右肘关节', 0, $event)">
							</view>
							<view v-if="isFace" class="arm"
								@click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view v-else class="arm-back"
								@click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view v-if="isFace" class="hand"
								@click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
							<view v-else class="hand-back"
								@click="getApiPartsSymptomList(isFace ? '上肢' : '上肢', 0, $event)">
							</view>
						</view>
					</view>
					<view class="legs-box">
						<view class="thign-box">
							<view class="thigns" @click="getApiPartsSymptomList(isFace ? '下肢' : '下肢', 0, $event)">
							</view>
							<view class="thigns" style="margin-right: 5%;"
								@click="getApiPartsSymptomList(isFace ? '下肢' : '下肢', 0, $event)">
							</view>
						</view>
						<view class="knee-box" v-if="isFace">
							<view class="knees" @click="getApiPartsSymptomList('下肢', 0, $event)">
							</view>
							<view class="knees" @click="getApiPartsSymptomList('下肢', 0, $event)">
							</view>
						</view>
						<view class="lower-leg-box"
							:style="{'height': isFace ? '38%;' : '54%;', 'margin-right': isFace ? '0' : '10%'}">
							<view class="lower-legs" @click="getApiPartsSymptomList(isFace ? '下肢' : '下肢', 0, $event)">
							</view>
							<view class="lower-legs" style="margin-right: -5%;"
								@click="getApiPartsSymptomList(isFace ? '下肢' : '下肢', 0, $event)">
							</view>
						</view>
						<view class="ankle-joint-box" v-if="isFace">
							<view class="ankle-joints" @click="getApiPartsSymptomList('下肢', 0, $event)">
							</view>
							<view class="ankle-joints" @click="getApiPartsSymptomList('下肢', 0, $event)">
							</view>
						</view>
						<view class="ankle-joint-box-back" v-else>
							<view class="ankle-joints" @click="getApiPartsSymptomList('下肢', 0, $event)">
							</view>
							<view class="ankle-joints" style="margin-right: 10%;"
								@click="getApiPartsSymptomList('下肢', 0, $event)"></view>
						</view>
						<view class="foots-box" v-if="isFace">
							<view class="foot" @click="getApiPartsSymptomList('下肢', 0, $event)">
							</view>
							<view class="foot" @click="getApiPartsSymptomList('下肢', 0, $event)">
							</view>
						</view>
						<view class="foots-box-back" v-else>
							<view class="foot" style="margin-left: -8%;"
								@click="getApiPartsSymptomList('下肢', 0, $event)"></view>
							<view class="foot" @click="getApiPartsSymptomList('下肢', 0, $event)">
							</view>
						</view>
					</view>
				</view>
				<image class="image" v-if="sex === 0 && isChild === 0 && isFace"
					src="https://yixianfeng.oss-cn-beijing.aliyuncs.com/static/images/woman_child_face.png" webp="true" />
				<image class="image" v-if="sex === 0 && isChild === 0 && !isFace"
					src="https://yixianfeng.oss-cn-beijing.aliyuncs.com/static/images/woman_child_back.png" webp="true" />
			</view>

			<view class="turn-around" @click="isFace = !isFace, isShowBall = false">转身</view>
		</view>

		<!--部位列表-->
		<view class="list-box" v-else>
			<view class="list" v-for="(item, index) in list" :key="index" @click="btnShowPopup(item.id, index)">
				<p class="title">{{item.bodyPartsName}}</p>
				<image class="icon" src="https://yixianfeng.oss-cn-beijing.aliyuncs.com/static/images/ic_next.png" webp="true">
			</view>
		</view>

		<!--弹层-->
		<uni-drawer class="popup" ref="showRight" mode="right">
			<scroll-view class="list-boxs" @click.stop style="height: 100%;" scroll-y="true">
				<view class="title">{{title}}</view>
				<view class="list" v-for="(item, index) in symptomList" :key="index"
					@click="btnPath('/pages/other/guidance/main?id=' + item.id)">
					<p class="text">{{item.symptomName}}</p>
					<image class="icon" src="https://yixianfeng.oss-cn-beijing.aliyuncs.com/static/images/ic_next.png" webp="true" />
				</view>
			</scroll-view>
		</uni-drawer>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				active: 0,
				top: 0,
				left: 0,

				sex: 1, // 1: 男  0: 女
				isChild: 1, // 1: 成人  0: 儿童
				isFace: true, //true 正面 //方面
				title: '',
				list: [],
				symptomList: [],
				isShowBall: false,
				showPopup: false
			}
		},
		onLoad() {
			Object.assign(this, this.$options.data());
			this.getAPiIndexData();
		},
		methods: {
			// 请求身体部位列表
			getAPiIndexData() {
				let data = {
					sex: this.sex ? 1 : 2,
					type: this.isChild
				}
				this.$api.http(
					'/sms/smsBodyPartsInfo/api/n/list',
					'GET',
					data,
					res => {
						this.list = res.data.result
						console.log('身体部位列表',res.data.result);
					},
					err => {

					}
				)
			},
			//点击模态框- 请求身体部位症状列表
			getApiPartsSymptomList(name, sid, e) {
				if(name == ''){
					return
				}
				let id = ''
				if (!sid) {
					for (let i = 0; i < this.list.length; i++) {
						if (this.list[i].bodyPartsName == name) {
							id = this.list[i].id
						}
					}
					this.top = e.currentTarget.offsetTop
					this.left = e.currentTarget.offsetLeft + 40
				} else {
					id = sid
				}
				
				this.isShowBall = true
				this.title = name
				this.$refs.showRight.open()
				this.$api.http(
					'/sms/smsBodyPartsInfo/api/n/listBodyPartsSymptomByPartsId',
					'GET', {
						partsId: id
					},
					res => {
						let obj = {}
						this.symptomList = res.data.result.reduce((pre, next) => {
							obj[next.symptomName] ? '' : obj[next.symptomName] = true && pre.push(next)
							return pre
						}, [])
					},
					err => {

					}
				)
			},
			// 切换顶部tab
			btnSwitchTab(status) {
				if (status === this.active) return
				this.title = ''
				this.showPopup = false
				this.active = status
				if (status) this.getAPiIndexData()
			},
			// 展示右侧弹出层
			btnShowPopup(id, index) {
				this.title = this.list[index].bodyPartsName
				this.showPopup = true
				this.getApiPartsSymptomList(this.list[index].bodyPartsName, id)
			},
			// 路由 - 跳转子页面
			btnPath(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style scoped lang='scss'>
	.cx-message {
		overflow-x: hidden;
		.switch-tab-bg {
			
			padding: 40rpx 15px 20rpx;
			z-index: 1;
			width: 100vw;
			background-color: #FFF;

			.switch-tab {
				display: flex;
				align-items: center;
				align-content: center;
				border-radius: 15rpx;
				overflow: hidden;

				.tabs {
					flex: 1;
					padding: 15rpx 0;
					text-align: center;
					font-size: 32rpx;
				}
			}
		}

		.container-image {
			position: relative;
			/* padding-top: 130rpx; */
			width: 100vw;
			height: 100vh;

			.tabs-left {
				position: absolute;
				top: 150rpx;
				left: 20rpx;
				z-index: 99;
				padding: 6rpx;
				display: flex;
				align-items: center;
				align-content: center;
				border-radius: 30rpx;
				background-color: #FFF;

				.sex-tabs {
					flex: 1;
					padding: 5rpx 30rpx;
					border-radius: 30rpx;
					font-size: 26rpx;
					text-align: center;

					&:first-child {
						margin-right: 15rpx;
					}
				}
			}

			.tabs-right {
				position: absolute;
				top: 150rpx;
				right: 20rpx;
				z-index: 99;
				padding: 6rpx;
				display: flex;
				align-items: center;
				align-content: center;
				border-radius: 30rpx;
				background-color: #FFF;
				.age-tabs {
					flex: 1;
					padding: 5rpx 20rpx;
					border-radius: 30rpx;
					font-size: 26rpx;
					text-align: center;
				}
			}

			.image-box {
				position: relative;
				/* padding: 40rpx 0; */
				height: 100%;
				text-align: center;
				background-color: #F8F8F8;

				.image {
					height: 100%;
				}

				.point {
					position: absolute;	
					width: 20rpx;
					z-index: 10;
					height: 20rpx;
					border-radius: 50%;
					transition: all .4s;
					background-color: #F00;
				}

				.part-box-man {
					position: absolute;
					top: 30rpx;
					left: 50rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					z-index: 1;
					width: calc(100vw - 100rpx);
					height: 100%;
					opacity: 0;

					.head {
						width: 18%;
						height: 12.5%;
						background-color: #f00;
					}
					
					.neck {
						width: 18%;
						height: 3%;
						background-color: #FF0;
					}

					.trunk {
						margin-top: 5%;
						display: flex;
						align-items: center;
						width: 80%;
						height: 35%;

						.left {
							width: 30%;
							height: 105%;
							background-color: rgba(0, 0, 0, .3);

							.shoulder {
								margin-left: 65%;
								width: 35%;
								height: 10%;
								background-color: #1E90FF;
							}

							.big-arm {
								margin-left: 65%;
								width: 35%;
								height: 30%;
								background-color: #FF8C00;
							}

							.elbow {
								margin-left: 60%;
								width: 35%;
								height: 5%;
								background-color: #F00;
							}

							.arm {
								margin-left: 37%;
								width: 35%;
								height: 38%;
								transform: rotate(30deg);
								background-color: #FF00FF;
							}

							.hand {
								width: 37%;
								height: 18%;
								transform: rotate(30deg);
								background-color: #00FF00;
							}
						}

						.middle {
							margin-top: -5%;
							width: 40%;
							height: 95%;
							background-color: rgba(0, 0, 0, .3);

							.chest {
								display: flex;
								align-items: center;
								height: 28%;

								.left-chest {
									width: 40%;
									height: 100%;
									background-color: #FF0;
								}

								.hert {
									width: 20%;
									height: 65%;
									background-color: #F00;
								}

								.right-chest {
									width: 40%;
									height: 100%;
									background-color: #FF0;
								}
							}

							.back-box {
								display: flex;
								align-items: center;
								height: 40%;

								.back {
									width: 50%;
									height: 100%;
									background-color: #FF0;
								}
							}

							.abdomen {
								display: flex;
								flex-direction: column;
								height: 40%;

								.abdomens {
									display: flex;
									align-items: center;
									height: 50%;
								}
							}

							.waist-box {
								display: flex;
								height: 25%;

								.waists {
									display: flex;
									align-items: center;
									width: 50%;
									height: 100%;
									background-color: #F00;
								}
							}

							.hips-box {
								width: 100%;
								height: 75%;
								background-color: #FF0;
							}

							.anus {
								margin: 0 auto;
								width: 30%;
								height: 25%;
								background-color: #1E90FF;
							}
						}

						.right {
							width: 30%;
							height: 105%;
							background-color: rgba(0, 0, 0, .3);

							.shoulder {
								width: 35%;
								height: 10%;
								background-color: #1E90FF;
							}

							.big-arm {
								width: 35%;
								height: 30%;
								background-color: #FF8C00;
							}

							.elbow {
								margin-left: 10%;
								width: 35%;
								height: 8%;
								background-color: #F00;
							}

							.arm {
								margin-left: 35%;
								width: 35%;
								height: 38%;
								transform: rotate(-30deg);
								background-color: #FF00FF;
							}

							.hand {
								margin-left: 70%;
								width: 37%;
								height: 18%;
								transform: rotate(-30deg);
								background-color: #00FF00;
							}
						}
					}

					.legs-box {
						margin-top: -3%;
						width: 30%;
						height: 43%;
						background-color: rgba(0, 0, 0, .3);

						.thign-box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 30%;

							.thigns {
								width: 45%;
								height: 100%;
								background-color: #FF00FF;
							}
						}

						.knee-box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 10%;

							.knees {
								width: 40%;
								height: 100%;
								background-color: #F00;
							}
						}

						.lower-leg-box {
							margin-left: 3%;
							margin-right: 10%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 38%;

							.lower-legs {
								width: 40%;
								height: 100%;
								background-color: #FF0;
							}
						}

						.ankle-joint-box {
							margin-left: 20%;
							margin-right: 30%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 8%;

							.ankle-joints {
								width: 40%;
								height: 100%;
								background-color: #00FF00;
							}
						}

						.ankle-joint-box-back {
							margin: 10% 20% 0 10%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 8%;

							.ankle-joints {
								width: 40%;
								height: 100%;
								background-color: #00FF00;
							}
						}

						.foots-box {
							margin-left: 10%;
							margin-right: 20%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 15%;

							.foot {
								width: 40%;
								height: 100%;
								background-color: #0000FF;
							}
						}

						.foots-box-back {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 10%;

							.foot {
								width: 45%;
								height: 100%;
								background-color: #0000FF;
							}
						}
					}
				}

				.part-box-woman {
					position: absolute;
					top: 30rpx;
					left: 50rpx;
					display: flex;
					z-index: 1;
					flex-direction: column;
					align-items: center;
					width: calc(100vw - 100rpx);
					height: 100%;
					opacity: 0;

					.head {
						width: 13%;
						height: 12%;
						background-color: #f00;
					}

					.neck {
						width: 13%;
						height: 3%;
						background-color: #FF0;
					}

					.trunk {
						margin-top: 5%;
						display: flex;
						align-items: center;
						width: 72%;
						height: 30%;

						.left {
							width: 31%;
							height: 118%;
							background-color: rgba(0, 0, 0, .3);

							.shoulder {
								margin-top: 9%;
								margin-left: 78%;
								width: 22%;
								height: 10%;
								background-color: #1E90FF;
							}

							.big-arm {
								margin-left: 75%;
								width: 27%;
								height: 20%;
								background-color: #FF8C00;
							}

							.elbow {
								margin-left: 74%;
								width: 26%;
								height: 5%;
								background-color: #F00;
							}

							.arm {
								margin-left: 58%;
								width: 29%;
								height: 38%;
								transform: rotate(20deg);
								background-color: #FF00FF;
							}

							.hand {
								margin-left: 11%;
								width: 50%;
								height: 22%;
								transform: rotate(30deg);
								background-color: #00FF00;
							}
						}

						.middle {
							margin-top: -5%;
							width: 38%;
							height: 95%;
							background-color: rgba(0, 0, 0, .3);

							.chest {
								margin-top: 9%;
								display: flex;
								align-items: center;
								height: 28%;

								.left-chest {
									width: 40%;
									height: 100%;
									background-color: #FF0;
								}

								.hert {
									margin-top: 2%;
									width: 20%;
									height: 65%;
									background-color: #F00;
								}

								.right-chest {
									width: 40%;
									height: 100%;
									background-color: #FF0;
								}
							}

							.back-box {
								margin-left: 5%;
								display: flex;
								align-items: center;
								width: 90%;
								height: 40%;

								.back {
									width: 50%;
									height: 100%;
									background-color: #FF0;
								}
							}

							.abdomen {
								// margin-top: 13%;
								margin-left: 10%;
								display: flex;
								flex-direction: column;
								width: 80%;
								height: 45%;

								.abdomens {
									display: flex;
									align-items: center;
									height: 50%;
								}
							}

							.waist-box {
								margin-left: 10%;
								display: flex;
								width: 80%;
								height: 35%;

								.waists {
									display: flex;
									align-items: center;
									width: 50%;
									height: 100%;
									background-color: #F00;
								}
							}

							.hips-box {
								width: 100%;
								height: 75%;
								background-color: #FF0;
							}

							.anus {
								margin: 0 auto;
								width: 30%;
								height: 25%;
								background-color: #1E90FF;
							}
						}

						.right {
							width: 30%;
							height: 118%;
							background-color: rgba(0, 0, 0, .3);

							.shoulder {
								margin-top: 9%;
								width: 22%;
								height: 10%;
								background-color: #1E90FF;
							}

							.big-arm {
								width: 27%;
								height: 20%;
								background-color: #FF8C00;
							}

							.elbow {
								width: 26%;
								height: 5%;
								background-color: #F00;
							}

							.arm {
								margin-left: 16%;
								width: 29%;
								height: 38%;
								transform: rotate(-20deg);
								background-color: #FF00FF;
							}

							.hand {
								margin-left: 44%;
								width: 50%;
								height: 22%;
								transform: rotate(-30deg);
								background-color: #00FF00;
							}
						}
					}

					.legs-box {
						margin-top: -2%;
						width: 28%;
						height: 49%;

						/* background-color: rgba(0, 0, 0, .3); */
						.thign-box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 38%;
							background-color: rgba(0, 0, 0, .3);

							.thigns {
								width: 45%;
								height: 100%;
								background-color: #FF00FF;
							}
						}

						.knee-box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 10%;

							.knees {
								width: 40%;
								height: 100%;
								background-color: #F00;
							}
						}

						.lower-leg-box {
							// margin-left: 3%;
							// margin-right: 10%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 29%;

							.lower-legs {
								width: 40%;
								height: 100%;
								background-color: #FF0;
							}
						}

						.ankle-joint-box {
							margin-left: 22%;
							margin-right: 23%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 5%;

							.ankle-joints {
								width: 43%;
								height: 100%;
								background-color: #00FF00;
							}
						}

						.ankle-joint-box-back {
							margin: 24% 20% 0 20%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 8%;

							.ankle-joints {
								width: 46%;
								height: 100%;
								background-color: #00FF00;
							}
						}

						.foots-box {
							margin-left: 19%;
							margin-right: 20%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 15%;

							.foot {
								width: 45%;
								height: 100%;
								background-color: #0000FF;
							}
						}

						.foots-box-back {
							margin-left: 19%;
							margin-right: 20%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 15%;

							.foot {
								width: 45%;
								height: 100%;
								background-color: #0000FF;
							}
						}
					}
				}

				.part-box-man-child {
					position: absolute;
					top: 30rpx;
					left: 50rpx;
					z-index: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					width: calc(100vw - 100rpx);
					height: 100%;
					opacity: 0;

					.head {
						margin-right: 5%;
						width: 37%;
						height: 25.5%;
						background-color: #f00;
					}

					.neck {
						width: 18%;
						height: 3%;
						background-color: #FF0;
					}

					.trunk {
						display: flex;
						align-items: center;
						width: 80%;
						height: 37%;

						.left {
							width: 26%;
							height: 90%;
							background-color: rgba(0, 0, 0, .3);

							.shoulder {
								margin-left: 65%;
								width: 35%;
								height: 10%;
								background-color: #1E90FF;
							}

							.big-arm {
								margin-left: 57%;
								width: 41%;
								height: 30%;
								transform: rotate(10deg);
								background-color: #FF8C00;
							}

							.elbow {
								margin-left: 43%;
								width: 47%;
								height: 5%;
								transform: rotate(10deg);
								background-color: #F00;
							}

							.arm {
								margin-left: 25%;
								width: 43%;
								height: 30%;
								transform: rotate(20deg);
								background-color: #FF00FF;
							}

							.hand {
								width: 58%;
								height: 20%;
								transform: rotate(20deg);
								background-color: #00FF00;
							}
						}

						.middle {
							width: 44%;
							height: 95%;
							background-color: rgba(0, 0, 0, .3);

							.chest {
								margin-top: 10%;
								display: flex;
								align-items: center;
								height: 28%;

								.left-chest {
									width: 40%;
									height: 100%;
									background-color: #FF0;
								}

								.hert {
									width: 20%;
									height: 65%;
									background-color: #F00;
								}

								.right-chest {
									width: 40%;
									height: 100%;
									background-color: #FF0;
								}
							}

							.back-box {
								margin-top: 10%;
								display: flex;
								align-items: center;
								height: 35%;

								.back {
									width: 50%;
									height: 100%;
									background-color: #FF0;
								}
							}

							.abdomen {
								display: flex;
								flex-direction: column;
								height: 33%;

								.abdomens {
									display: flex;
									align-items: center;
									height: 50%;
								}
							}

							.waist-box {
								display: flex;
								height: 25%;

								.waists {
									display: flex;
									align-items: center;
									width: 50%;
									height: 100%;
									background-color: #F00;
								}
							}

							.hips-box {
								width: 100%;
								height: 75%;
								background-color: #FF0;
							}

							.anus {
								margin: 0 auto;
								width: 35%;
								height: 30%;
								background-color: #1E90FF;
							}
						}

						.right {
							width: 27%;
							height: 90%;
							background-color: rgba(0, 0, 0, .3);

							.shoulder {
								width: 35%;
								height: 10%;
								background-color: #1E90FF;
							}

							.big-arm {
								margin-left: 2%;
								width: 42%;
								height: 27%;
								transform: rotate(-10deg);
								background-color: #FF8C00;
							}

							.elbow {
								margin-left: 10%;
								width: 45%;
								height: 8%;
								transform: rotate(-10deg);
								background-color: #F00;
							}

							.arm {
								margin-left: 28%;
								width: 44%;
								height: 34%;
								transform: rotate(-15deg);
								background-color: #FF00FF;
							}

							.arm-back {
								margin-left: 27%;
								width: 47%;
								height: 26%;
								transform: rotate(-18deg);
								background-color: #FF00FF;
							}

							.hand {
								margin-left: 35%;
								width: 55%;
								height: 18%;
								transform: rotate(-15deg);
								background-color: #00FF00;
							}

							.hand-back {
								margin-left: 45%;
								width: 60%;
								height: 18%;
								transform: rotate(-15deg);
								background-color: #00FF00;
							}
						}
					}

					.legs-box {
						margin-top: -1%;
						width: 40%;
						height: 30%;
						background-color: rgba(0, 0, 0, .3);

						.thign-box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 18%;

							.thigns {
								width: 45%;
								height: 100%;
								background-color: #FF00FF;
							}
						}

						.knee-box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 13%;

							.knees {
								width: 40%;
								height: 100%;
								background-color: #F00;
							}
						}

						.lower-leg-box {
							margin-left: 3%;
							margin-right: 10%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 38%;

							.lower-legs {
								width: 43%;
								height: 100%;
								background-color: #FF0;
							}
						}

						.ankle-joint-box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 8%;

							.ankle-joints {
								width: 40%;
								height: 100%;
								background-color: #00FF00;
							}
						}

						.ankle-joint-box-back {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 8%;

							.ankle-joints {
								width: 40%;
								height: 100%;
								background-color: #00FF00;
							}
						}

						.foots-box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 23%;

							.foot {
								width: 43%;
								height: 100%;
								background-color: #0000FF;
							}
						}

						.foots-box-back {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 14%;

							.foot {
								margin-right: 10%;
								width: 45%;
								height: 100%;
								background-color: #0000FF;
							}
						}
					}
				}

				.part-box-woman-child {
					position: absolute;
					top: 30rpx;
					left: 50rpx;
					z-index: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					width: calc(100vw - 100rpx);
					height: 100%;
					opacity: 0;

					.head {
						margin-top: 5%;
						margin-right: 5%;
						width: 37%;
						height: 23.5%;
						background-color: #f00;
					}

					.neck {
						margin-right: 5%;
						width: 18%;
						height: 3%;
						background-color: #FF0;
					}

					.trunk {
						display: flex;
						align-items: center;
						width: 80%;
						height: 37%;

						.left {
							margin-top: -5%;
							margin-left: -3%;
							width: 28%;
							height: 92%;
							background-color: rgba(0, 0, 0, .3);

							.shoulder {
								margin-left: 65%;
								width: 35%;
								height: 10%;
								background-color: #1E90FF;
							}

							.big-arm {
								margin-left: 55%;
								width: 46%;
								height: 30%;
								transform: rotate(10deg);
								background-color: #FF8C00;
							}

							.elbow {
								margin-left: 43%;
								width: 47%;
								height: 7%;
								transform: rotate(10deg);
								background-color: #F00;
							}

							.arm {
								margin-left: 29%;
								width: 43%;
								height: 30%;
								transform: rotate(25deg);
								background-color: #FF00FF;
							}

							.hand {
								width: 64%;
								height: 20%;
								transform: rotate(20deg);
								background-color: #00FF00;
							}
						}

						.middle {
							width: 44%;
							height: 80%;
							background-color: rgba(0, 0, 0, .3);

							.chest {
								margin-top: 10%;
								display: flex;
								align-items: center;
								height: 28%;

								.left-chest {
									width: 40%;
									height: 100%;
									background-color: #FF0;
								}

								.hert {
									width: 20%;
									height: 65%;
									background-color: #F00;
								}

								.right-chest {
									width: 40%;
									height: 100%;
									background-color: #FF0;
								}
							}

							.back-box {
								display: flex;
								align-items: center;
								height: 40%;

								.back {
									width: 50%;
									height: 100%;
									background-color: #FF0;
								}
							}

							.abdomen {
								display: flex;
								flex-direction: column;
								height: 38%;

								.abdomens {
									display: flex;
									align-items: center;
									height: 50%;
								}
							}

							.waist-box {
								display: flex;
								height: 35%;

								.waists {
									display: flex;
									align-items: center;
									width: 50%;
									height: 100%;
									background-color: #F00;
								}
							}

							.hips-box {
								width: 100%;
								height: 75%;
								background-color: #FF0;
							}

							.anus {
								margin: 0 auto;
								width: 40%;
								height: 30%;
								background-color: #1E90FF;
							}
						}

						.right {
							margin-right: -3%;
							width: 27%;
							height: 90%;
							background-color: rgba(0, 0, 0, .3);

							.shoulder {
								width: 35%;
								height: 10%;
								background-color: #1E90FF;
							}

							.big-arm {
								margin-left: 2%;
								width: 42%;
								height: 27%;
								transform: rotate(-10deg);
								background-color: #FF8C00;
							}

							.elbow {
								margin-left: 10%;
								width: 45%;
								height: 8%;
								transform: rotate(-10deg);
								background-color: #F00;
							}

							.arm {
								margin-left: 19%;
								width: 47%;
								height: 33%;
								transform: rotate(-15deg);
								background-color: #FF00FF;
							}

							.arm-back {
								margin-left: 27%;
								width: 47%;
								height: 26%;
								transform: rotate(-18deg);
								background-color: #FF00FF;
							}

							.hand {
								margin-left: 30%;
								width: 50%;
								height: 18%;
								transform: rotate(-15deg);
								background-color: #00FF00;
							}

							.hand-back {
								margin-left: 45%;
								width: 60%;
								height: 18%;
								transform: rotate(-15deg);
								background-color: #00FF00;
							}
						}
					}

					.legs-box {
						margin-top: -7%;
						margin-right: 4%;
						width: 37%;
						height: 33%;
						background-color: rgba(0, 0, 0, .3);

						.thign-box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 28%;

							.thigns {
								width: 45%;
								height: 100%;
								background-color: #FF00FF;
							}
						}

						.knee-box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 13%;

							.knees {
								width: 40%;
								height: 100%;
								background-color: #F00;
							}
						}

						.lower-leg-box {
							margin-left: 3%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 38%;

							.lower-legs {
								width: 43%;
								height: 100%;
								background-color: #FF0;
							}
						}

						.ankle-joint-box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 8%;

							.ankle-joints {
								width: 40%;
								height: 100%;
								background-color: #00FF00;
							}
						}

						.ankle-joint-box-back {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 8%;

							.ankle-joints {
								width: 40%;
								height: 100%;
								background-color: #00FF00;
							}
						}

						.foots-box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 13%;

							.foot {
								width: 43%;
								height: 100%;
								background-color: #0000FF;
							}
						}

						.foots-box-back {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 11%;

							.foot {
								margin-right: 10%;
								width: 47%;
								height: 100%;
								background-color: #0000FF;
							}
						}
					}
				}


			}

			.turn-around {
				position: absolute;
				bottom: 30rpx;
				right: 30rpx;
				width: 88rpx;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				color: #FFF;
				z-index: 10;
				font-size: 24rpx;
				border-radius: 50%;
				background-color: #dd1d1a;
			}
		}

		.is-selected {
			color: #FFF;
			background-color: #dd1d1a;
		}

		.no-select {
			color: #020202;
			background-color: #f5f5f5;
		}

		.list-box {
			/* padding-top: 130rpx; */

			// height: calc(100vh - 130rpx);
			.list {
				padding: 30rpx;
				display: flex;
				align-items: center;
				align-content: center;
				justify-content: space-between;
				background-color: #FFF;
				border-top: 1px solid #F8F8F8;

				.title {
					color: #020202;
					font-size: 30rpx;
				}

				.icon {
					width: 15rpx;
					height: 25rpx;
				}
			}
		}

		.popup {
			.list-boxs {
				width: 562.5rpx;
				height: 100vh;
				background-color: #FFF;

				.title {
					padding: 20rpx 0;
					text-align: center;
					font-size: 30rpx;
					color: #dd1d1a;
				}

				.list {
					padding: 30rpx;
					display: flex;
					align-items: center;
					align-content: center;
					justify-content: space-between;
					background-color: #FFF;
					border-top: 1px solid #F8F8F8;

					.text {
						color: #020202;
						font-size: 30rpx;
					}

					.icon {
						width: 15rpx;
						height: 25rpx;
					}
				}
			}
		}
	}
</style>

